<template>
    <view class="gjl-view">
        <view class="top-box">
            <view class="left" @click="$routerTo({path: '/pagesMine/bookstore/type'})">
                <mIcon type="caidan" size="18" color="#999"></mIcon>
            </view>
            <view class="center">
                <view class="cent-left">
                    <mIcon type="sousuo" size="16" color="#999"></mIcon>
                </view>
                <view class="input-box">
                    <input v-model="form.bookstoreName" class="uni-input" confirm-type="search" @confirm="doSearch"
                        placeholder-style="color:#333;font-size:28rpx;" placeholder="请输入搜索内容" />
                </view>
                <view class="cent-right" @click="clearSearch">
                    <mIcon type="err" size="16" color="#999"></mIcon>
                </view>
            </view>
            <view class="right" @click="doSearch">
                搜索
            </view>
        </view>
        <view class="tab-box">
            <mTab :type="4" :tabArr="tabArr" @chageTab="chageTab"></mTab>
        </view>
        <view class="height-L"></view>
        <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y">
            <view class="bookstore-box">
                <view class="book-bg">
                    <checkbox-group @change="chooseBook" style="height: 100%;">
                        <view class="book-inner">
                            <view class="book-li" v-for="(item,index) in list" :key="index">
                                <label>
                                    <checkbox v-show="false" v-if="showAction" :value="item.bookstoreId" />
                                    <view class="book-img">
                                        <view class="cover-choose" v-if="showAction">
                                            <image src="https://img.thumbrary.com/choose-yuan-active.png" mode="" v-if="checkChoose(item.bookstoreId)"></image>
                                            <image src="https://img.thumbrary.com/choose-yuan.png" mode="" v-else></image>
                                        </view>
                                        <image :src="item.bookstoreImg" mode="aspectFit"></image>
                                    </view>
                                </label>
                            </view>
                        </view>
                    </checkbox-group>
                </view>
            </view>
        </scroll-view>
        <view class="footer-chengqi"></view>
        <view class="footer-box">
            <view class="left" @click="delStatus" v-if="showDel">
                <mIcon type="shanchu" size="16" color="#999" v-if="!showAction"></mIcon>
                <view class="text">
                    {{showAction?'取消删除':'删除'}}
                </view>
            </view>
            <view class="left" @click="goBack" v-if="!showChoose && !showDel">
                <mIcon type="shanchu" size="16" color="#999" v-if="!showAction"></mIcon>
                <view class="text">
                    取消
                </view>
            </view>
            <view class="left" v-if="showChoose">
                <view class="confirm">
                    当前已选择{{chooseList.length}}本
                </view>
            </view>
            <view class="right">
                <view class="btn-box" v-if="!showAction && showDel">
                    <view class="cover-left" @click="$routerTo({path: '/pagesMine/bookstore/sort'})">
                        排序
                    </view>
                    <view class="cover-right" @click="$routerTo({path: '/pagesMine/bookstore/daka'})">
                        读书打卡
                    </view>
                </view>
                <view class="btn-box" v-if="showAction && showDel">
                    <view class="btn" @click="BookstoreDelBookstore">
                        确认删除
                    </view>
                </view>
                <view class="btn-box" v-if="showChoose || showAdd">
                    <view class="confirm" @click="confirmChoose">
                        确认选择
                    </view>
                </view>
            </view>
        </view>
        <view class="sidebar" @click="$routerTo({path: '/pagesMine/bookstore/add',query:{type: pos.type || '',bookstoreSortId: pos.bookstoreSortId || ''}})">
            <mIcon type="jiahao" size="20" color="#2BA8FC"></mIcon>
        </view>
    </view>
</template>

<script>
    import mTab from '@/components/m-tab/index.vue'
    import service from "@/service";
    export default {
        components: {
            mTab
        },
        data() {
            return {
                tabArr: [{
                        title: '全部',
                        value: ''
                    },
                    {
                        title: '未读',
                        value: 0
                    },
                    {
                        title: '已读',
                        value: 1
                    }
                ],
                showAction: false,
                list: [],
                form: {
                    isRead: '',
                    bookstoreName: '',
                    group: '',
                    bookstoreSortId: ''
                },
                chooseList: [],
                pos: {}
            }
        },
        computed: {
            showDel() {
                if (!this.pos.id && !this.pos.temp && !this.pos.addType) {
                    return true
                }
                return false
            },
            showChoose() {
                if (this.pos.id) {
                    return true
                }
                return false
            },
            showAdd() {
                if (this.pos.temp || this.pos.addType) {
                    return true
                }
                return false
            }
        },
        onLoad(res) {
            this.pos = res
            if (res.id || res.temp || this.pos.addType) {
                this.showAction = true
            }
            this.form.bookstoreSortId = res.bookstoreSortId || ''
        },
        onShow() {
            uni.getStorage({
                key: 'storeSort',
                success: (res) => {
                    if (res.data == 1) {
                        this.form.group = 'bp.bookstorePunchAddTime'
                    } else if (res.data == 2) {
                        this.form.group = 'b.bookstoreAddTime'
                    } else if (res.data == 3) {
                        this.form.group = ''
                    } else if (res.data == 4) {
                        this.form.group = 'b.bookstorePress'
                    } else if (res.data == 5) {
                        this.form.group = 'b.bookstoreAuthor'
                    }
                    this.BookstoreListBookstore()
                },
                fail: (res) => {
                    this.BookstoreListBookstore()
                }
            });
        },
        methods: {
            // 返回
            goBack(){
                uni.navigateBack({
                    delta: 1
                })
            },
            // 确认选择
            confirmChoose() {
                if (this.pos.addType) {
                    let status = 0
                    for(let i = 0; i < this.chooseList.length; i ++){
                        service.mineService.addBookstoreSortId({
                            data: {
                                bookstoreId: this.chooseList[i],
                                bookstoreSortId: this.pos.bookstoreSortId
                            },
                            success: res => {
                                status ++
                                if(status == this.chooseList.length){
                                    uni.navigateBack({
                                        delta:1
                                    })
                                }
                            },
                            fail: () => {

                            },
                            complete: () => {
                                uni.hideLoading();
                            },
                        })
                    }
                    return
                }
                if (this.pos.id) {
                    service.mineService.BookstorePunchAdd({
                        data: {
                            bookstoreIds: this.chooseList
                        },
                        success: res => {
                            this.$routerTo({
                                path: '/pagesMine/bookstore/daka',
                                type: 'RT'
                            })
                        },
                        fail: () => {

                        },
                        complete: () => {
                            uni.hideLoading();
                        },
                    })
                    return
                }
                service.mineService.BookstorePlanAdd({
                    data: {
                        bookstoreIds: this.chooseList,
                        time: this.pos.temp
                    },
                    success: res => {
                        if (this.pos.back) {
                            uni.navigateBack({
                                delta: 1
                            })
                            return
                        }
                        this.$routerTo({
                            path: '/pagesMine/bookstore/addPlan',
                            query: {
                                temp: this.pos.temp
                            },
                            type: 'RT'
                        })
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                })
            },
            // 删除书籍
            BookstoreDelBookstore() {
                service.mineService.BookstoreDelBookstore({
                    data: {
                        bookstoreId: this.chooseList
                    },
                    success: res => {
                        this.BookstoreListBookstore()
                        this.delStatus()
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            // 获取书籍列表
            BookstoreListBookstore() {
                let obj = {...this.form}
                if(this.pos.addType){
                    obj.bookstoreSortId = ''
                }
                service.mineService.BookstoreListBookstore({
                    data: { ...obj
                    },
                    success: res => {
                        this.list = res.result;
                    },
                    fail: () => {

                    },
                    complete: () => {
                        uni.hideLoading();
                    },
                });
            },
            //删除状态
            delStatus() {
                this.showAction = !this.showAction
                if (!this.showAction) {
                    this.chooseList = []
                }
            },
            checkChoose(id) {
                id = `${id}`
                if (this.chooseList.indexOf(id) != -1) {
                    return true
                } else {
                    return false
                }
            },
            chooseBook(e) {
                this.chooseList = e.detail.value
            },
            chageTab(e) {
                this.form.isRead = e.value
                this.BookstoreListBookstore()
            },
            doSearch() {
                this.BookstoreListBookstore()
            },
            clearSearch() {
                this.form.bookstoreName = ''
                this.BookstoreListBookstore()
            }
        }
    }
</script>
<style>
    page {
        width: 100%;
        height: 100%;
        min-height: 100%;
        display: flex;
    }
</style>
<style scoped lang="scss">
    .gjl-view {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;

        .height-L {
            height: 30rpx;
            background: rgba(249, 249, 249, 1);
        }

        .sidebar {
            height: 160rpx;
            width: 160rpx;
            border-radius: 50%;
            background: rgba(255, 255, 255, 1);
            position: fixed;
            right: 38rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            bottom: 264rpx;
            box-shadow: 0px 2px 10px rgba(136, 136, 136, 0.16);
        }

        .footer-chengqi {
            height: 100rpx;
        }

        .footer-box {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px -2px 10px rgba(136, 136, 136, 0.16);
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 11rpx 30rpx 35rpx;

            .left {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                flex: 1 1 auto;

                .confirm {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(43, 168, 252, 1);
                }

                .text {
                    margin-top: 5rpx;
                    font-size: 22rpx;
                    font-weight: 400;
                    color: rgba(153, 153, 153, 1);
                }
            }

            .right {
                .btn-box {
                    display: flex;
                    align-items: center;
                    text-align: center;

                    .confirm {
                        text-align: center;
                        line-height: 88rpx;
                        width: 410rpx;
                        height: 88rpx;
                        background: rgba(43, 168, 252, 1);
                        border-radius: 4rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }

                    .btn {
                        text-align: center;
                        line-height: 88rpx;
                        width: 410rpx;
                        height: 88rpx;
                        background: rgba(248, 36, 50, 1);
                        border-radius: 4rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }

                    .cover-left {
                        box-sizing: border-box;
                        padding: 24rpx 0;
                        min-width: 220rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(43, 168, 252, 1);
                        border: 1px solid rgba(43, 168, 252, 1);
                        border-radius: 4rpx;
                    }

                    .cover-right {
                        margin-left: 20rpx;
                        padding: 24rpx 0;
                        background: rgba(43, 168, 252, 1);
                        border-radius: 4rpx;
                        min-width: 300rpx;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }
                }
            }
        }

        .scroll-Y {
            flex: 1;
            overflow: hidden;

            .bookstore-box {

                .book-bg {
                    background: rgba(249, 249, 249, 1);

                    .book-inner {
                        // display: flex;
                        background-image: url('https://img.thumbrary.com/book-bg.png');
                        background-size: 750rpx 232rpx;
                        // flex-wrap: wrap;
                        padding: 0 60rpx;
                        min-height: 100vh;

                        .book-li {
                            display: inline-block;
                            width: 33%;
                            height: 232rpx;

                            .book-img {
                                width: 100%;
                                box-sizing: border-box;
                                height: 100%;
                                // align-items: flex-end;
                                display: flex;
                                justify-content: center;
                                position: relative;
                                align-items: center;
                                image {
                                    width: 98%;
                                    height: 100%;
                                }

                                .cover-choose {
                                    right: 10%;
                                    top: 50%;
                                    transform: translate(0,80%);
                                    position: absolute;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    height: 42rpx;
                                    width: 42rpx;

                                    image {
                                        height: 42rpx;
                                        width: 42rpx;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .tab-box {
            margin-top: 36rpx;
        }

        .top-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 20rpx 50rpx 0 46rpx;

            .left {
                display: flex;
            }

            .center {
                box-sizing: border-box;
                padding: 13rpx 23rpx 15rpx 35rpx;
                width: 500rpx;
                background: rgba(249, 249, 249, 1);
                border-radius: 40rpx;
                display: flex;
                align-items: center;

                .cent-left {}

                .input-box {
                    margin-left: 23rpx;
                    flex: 1 0 auto;
                }

                .cent-right {
                    margin-left: 20rpx;
                }
            }

            .right {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
            }
        }
    }
</style>
